<template>
  <div class="main-outer">
    <div class="main-nav-list">
      <div class="content">
        <MainNavList />
      </div>
    </div>
    <div class="menu">
      <div class="search">
        <Search />
      </div>
      <div class="books-page">
        <div class="book-detail-main">
          <div class="book-info-view">
            <div class="book-image-name">
              <div class="book-image">
                <img
                  v-lazy="`https://file.ituring.com.cn/LargeCover/${bookAllDetail.coverKey}`"
                />
              </div>
              <div class="book-info">
                <div class="upper">
                  <div class="book-status">
                    <span>上市销售</span>
                    <span>图灵程序设计丛书</span>
                  </div>
                  <h1 class="book-name">{{ bookAllDetail.name }}</h1>
                  <div class="relate-name">
                    <span>作者:</span>
                    <span>{{ bookAllDetail.authorNameString }}</span>
                  </div>
                  <div
                    class="relate-name"
                    v-if="bookAllDetail.translatorNameString"
                  >
                    <span>译者:</span>
                    <span>{{ bookAllDetail.translatorNameString }}</span>
                  </div>
                </div>
                <div class="bottom">
                  <div class="book-classification">
                    <span>分类:</span>
                    <span
                      ><span
                        v-for="category in bookAllDetail.categories[0]"
                        :key="category.name"
                        >{{ category.name }} >
                      </span></span
                    >
                  </div>
                  <div class="book-tags">
                    <span
                      v-for="tag in bookAllDetail.tags"
                      :key="`tag${tag.name}`"
                      >{{ tag.name }}</span
                    >
                  </div>
                </div>
              </div>
            </div>

            <div class="book-counts">
              <div class="count-item">
                <div class="count-img">
                  <img
                    src="https://www.ituring.com.cn/img/want-read-icon.030fb9dc.svg"
                  />
                </div>
                <div class="count-box">
                  <div class="count-box-text">加入愿望清单</div>
                  <div class="count-box-num">{{ bookAllDetail.favCount }}</div>
                </div>
              </div>
              <div class="count-item">
                <div class="count-img">
                  <img
                    src="https://www.ituring.com.cn/img/recommend-icon.f76f2546.svg"
                  />
                </div>
                <div class="count-box">
                  <div class="count-box-text">推荐</div>
                  <div class="count-box-num">{{ bookAllDetail.voteCount }}</div>
                </div>
              </div>
              <div class="count-item">
                <div class="count-img">
                  <img
                    src="https://www.ituring.com.cn/img/read-online-icon.db682cf7.svg"
                  />
                </div>
                <div class="count-box">
                  <div class="count-box-text">在线阅读</div>
                  <div class="count-box-num">{{ bookAllDetail.viewCount }}</div>
                </div>
              </div>
              <div class="count-item">
                <div class="count-img">
                  <img
                    src="https://www.ituring.com.cn/img/ebook-download-icon.8efa1dbf.svg"
                  />
                </div>
                <div class="count-box">
                  <div class="count-box-text">随书下载</div>
                  <div class="count-box-num">
                    <span style="font-size: 12px; color: #ccc">文件</span>
                    {{
                      bookAllDetail.resources
                        ? bookAllDetail.resources.length
                        : 0
                    }}
                  </div>
                </div>
              </div>
              <div class="count-item">
                <div class="count-img">
                  <img
                    src="https://www.ituring.com.cn/img/share-icon.01325570.svg"
                  />
                </div>
                <div class="count-box">
                  <div class="count-box-text">分享</div>
                  <div class="count-box-num">
                    <img
                      src="https://www.ituring.com.cn/img/wb-share.de904f1b.svg"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="buy-way">
            <div class="title">购买方式</div>
            <div class="flex-view">
              <div class="buy-way-item">
                <div class="item-name">纸质书</div>
                <div class="item-price">
                  <span class="current-price">￥98.24</span>
                  <span class="previous-price">￥119.28</span>
                </div>
                <div class="item-button">
                  <img src="https://www.ituring.com.cn/img/add.f1b6bc95.svg" />
                  <span>购书袋</span>
                </div>
              </div>
              <div class="buy-way-item">
                <div class="item-name">
                  电子书
                  <img
                    src="https://www.ituring.com.cn/img/ebook-right-icon.8843c639.svg"
                  />
                  <span>mobi</span>
                  <img
                    src="https://www.ituring.com.cn/img/ebook-right-icon.8843c639.svg"
                  />
                  <span>pdf</span>
                </div>
                <div class="item-price">
                  <span class="current-price">￥54.9</span>
                </div>
                <div class="item-button">
                  <img src="https://www.ituring.com.cn/img/add.f1b6bc95.svg" />
                  <span>购书袋</span>
                </div>
              </div>
              <div class="buy-way-item">
                <div class="item-name">样书</div>
                <div class="item-price">
                  <span class="current-price">109.8银子</span>
                </div>
                <div class="item-button">
                  <img src="https://www.ituring.com.cn/img/add.f1b6bc95.svg" />
                  <span>购书袋</span>
                </div>
              </div>
            </div>
          </div>
          <div class="book-content-view">
            <div class="main-content">
              <div class="main-tab">
                <div class="tab selected">
                  <span>图书介绍</span>
                  <span class="underline"></span>
                </div>
                <div class="tab">
                  <span>在线阅读</span>
                  <span class="underline"></span>
                </div>
                <div class="tab">
                  <span>评论</span>
                  <sup>{{ bookAllDetail.commentCount }}</sup>
                  <span class="underline"></span>
                </div>
                <div class="tab">
                  <span>勘误</span>
                  <span class="underline"></span>
                </div>
                <div class="tab">
                  <span>相关文章</span>
                  <span class="underline"></span>
                </div>
              </div>
              <div class="book-intro">
                <h4 class="title">简介</h4>
                <p class="text">
                  {{ bookAllDetail.abstract }}
                </p>
                <h4 class="title">本书特色</h4>
                <span
                  class="text"
                  v-html="bookAllDetail.briefIntro.highlight"
                ></span>
                <h4 class="title">作译者介绍</h4>
                <p
                  class="text"
                  v-html="bookAllDetail.briefIntro.authorInfo"
                ></p>
                <h4 class="title">出版信息</h4>
                <ul class="text">
                  <li class="published-item">
                    <span class="published-label">书名</span>
                    <span class="published-value">{{
                      bookAllDetail.name
                    }}</span>
                  </li>
                  <li class="published-item">
                    <span class="published-label">系列书名</span>
                    <span class="published-value">{{
                      bookAllDetail.bookCollectionName
                    }}</span>
                  </li>
                  <li class="published-item">
                    <span class="published-label">执行编辑</span>
                    <span class="published-value"
                      >关于本书的问题，请联系
                      {{
                        bookAllDetail.deputyEditor
                          ? bookAllDetail.deputyEditor.name
                          : ''
                      }}</span
                    >
                  </li>
                  <li class="published-item">
                    <span class="published-label">出版日期</span>
                    <span class="published-value">{{
                      bookAllDetail.publishDate
                    }}</span>
                  </li>
                  <li class="published-item">
                    <span class="published-label">书号</span>
                    <span class="published-value">{{
                      bookAllDetail.isbn
                    }}</span>
                  </li>
                  <li class="published-item">
                    <span class="published-label">定价</span>
                    <span class="published-value">109.7</span>
                  </li>
                  <li class="published-item">
                    <span class="published-label">页数</span>
                    <span class="published-value">{{
                      bookAllDetail.paperEditionInfo
                        ? bookAllDetail.paperEditionInfo.pageNumber
                        : 0
                    }}</span>
                  </li>
                  <li class="published-item">
                    <span class="published-label">印刷方式</span>
                    <span class="published-value">{{
                      bookAllDetail.paperEditionInfo
                        ? bookAllDetail.paperEditionInfo.bookPrintName
                        : ''
                    }}</span>
                  </li>
                  <li class="published-item">
                    <span class="published-label">开本</span>
                    <span class="published-value">{{
                      bookAllDetail.paperEditionInfo
                        ? bookAllDetail.paperEditionInfo.pageSizeName
                        : ''
                    }}</span>
                  </li>
                  <li class="published-item">
                    <span class="published-label">出版状态</span>
                    <span class="published-value">上市销售</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="recommend">
              <div class="title">大家都在读</div>
              <div class="books">
                <OneBook v-for="book in bookAllDetail.relatedBooks" :key="book.isbn" :book="book" />
              </div>
            </div>
          </div>
        </div>
        <div class="footer">
          <Footer />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Footer from '../../components/Footer'
import MainNavList from '../../components/MainNavList'
import Search from '../../components/Search'
import OneBook from '../../components/OneBook'

import API from '../../API/BookDetail'

export default {
  name: 'BookDetail',
  data() {
    return {
      bookAllDetail: {
        categories: [],
        briefIntro: {}
      }
    }
  },
  methods: {
    handleBookClick(bookId) {
      this.$router.push({
        name: 'BookDetail',
        params: {
          bookId
        }
      })
    }
  },
  components: {
    Footer,
    MainNavList,
    Search,
    OneBook
  },
  async mounted() {
    this.bookAllDetail = Object.freeze(await API.reqGetBookDetail(this.$route.params.bookId))
  },
  watch: {
    async $route(newVal) {
      this.bookAllDetail = {
        categories: [],
        briefIntro: {}
      }
      this.bookAllDetail = await API.reqGetBookDetail(newVal.params.bookId)
      window.scrollTo(0, 0)
    }
  }
}
</script>

<style lang="less" scoped>
.main-outer {
  display: flex;
  position: relative;
  width: 100%;
  .main-nav-list {
    position: relative;
    top: 0;
    min-height: 100vh;
    min-width: 171px;
    border-right: 1px solid #cedce4;
    background-color: white;
    z-index: 2;
    .content {
      position: fixed;
      top: 16px;
      width: 140px;
    }
  }
  .menu {
    flex-grow: 1;
    display: flex;
    height: 100%;
    flex-direction: column;
    z-index: 1;
    .search {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 56px;
      background: #fff;
      border-bottom: 1px solid #cedce4;
      z-index: 1;
    }
  }
}
.books-page {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.book-detail-main {
  padding: 52px 134px 0;
  .book-info-view {
    margin-top: 30px;
    height: 320px;
    display: flex;
    justify-content: space-between;
    .book-image-name {
      flex-grow: 1;
      display: flex;
      .book-image {
        width: 235px;
        flex-shrink: 0;
        margin-right: 40px;
        img {
          width: 100%;
          overflow: hidden;
          border-radius: 5px;
        }
      }
      .book-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 300px;
        .upper {
          .book-status {
            height: 26px;
            line-height: 26px;
            & > span:first-child {
              font-weight: 500;
              font-size: 14px;
              color: #4684e2;
              background: rgba(70, 132, 226, 0.1);
              border-radius: 2px;
              padding: 5px 8px;
              margin-right: 16px;
            }
            & > span:last-child {
              font-size: 14px;
              color: #152844;
            }
          }
          .book-name {
            font-size: 24px;
            line-height: 32px;
            margin: 16px 0;
          }
          .relate-name {
            & > span:first-child {
              line-height: 18px;
              font-size: 14px;
              margin-right: 14px;
              color: #787878;
            }
            & > span:last-child {
              line-height: 18px;
              font-size: 14px;
              color: #315c9e;
              white-space: normal;
            }
          }
        }
        .bottom {
          font-size: 14px;
          .book-classification {
            & > span:first-child {
              color: #787878;
            }
          }
          .book-tags {
            margin-top: 10px;
            span {
              padding: 5px 8px;
              margin-right: 8px;
              height: 22px;
              line-height: 22px;
              border: 1px solid #a1adc5;
              border-radius: 11px;
            }
          }
        }
      }
    }
    .book-counts {
      flex-shrink: 0;
      width: 235px;
      height: 100%;
      margin-left: 20px;
      .count-item {
        height: 64px;
        display: flex;
        .count-img {
          margin-right: 24px;
          height: 100%;
          img {
            display: block;
            margin-top: 16px;
          }
        }
        .count-box {
          flex-grow: 1;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #cedce4;
          height: 100%;
          .count-box-text {
            font-size: 16px;
            font-weight: bold;
            line-height: 64px;
          }
          .count-box-num {
            font-size: 20px;
            font-weight: bold;
            line-height: 64px;
          }
        }
      }
    }
  }
  .buy-way {
    margin-top: 40px;
    .title {
      font-weight: 600;
      font-size: 18px;
      height: 26px;
      line-height: 26px;
      color: #152844;
      margin-bottom: 12px;
    }
    .flex-view {
      display: flex;
      .buy-way-item {
        background: #fbfeff;
        border: 1px solid #cedce4;
        border-radius: 4px;
        padding: 10px;
        width: 233px;
        height: 105px;
        margin-right: 20px;
        .item-name {
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          color: #152844;
          height: 24px;
          margin-bottom: 12px;
          img {
            width: 10px;
            margin: 0 4px 0 10px;
          }
          span {
            color: #787878;
            font-size: 12px;
            font-weight: 400;
          }
        }
        .item-price {
          .current-price {
            color: #ff7b31;
            font-size: 18px;
            font-weight: 700;
          }
          .previous-price {
            text-decoration: line-through;
            margin-left: 8px;
            color: #787878;
            font-weight: 400;
          }
        }
        .item-button {
          background: #4684e2;
          border-radius: 4px;
          text-align: center;
          color: #fff;
          font-size: 14px;
          height: 32px;
          line-height: 32px;
          width: 76px;
          outline: none;
          border: none;
          margin-top: 12px;
          img {
            width: 12px;
            margin-right: 2px;
            vertical-align: middle;
          }
          span {
            vertical-align: middle;
          }
        }
      }
    }
  }
  .book-content-view {
    margin-top: 40px;
    padding-bottom: 50px;
    display: flex;
    .main-content {
      flex-grow: 1;
      .main-tab {
        border-bottom: 1px solid #cedce4;
        display: flex;
        .tab {
          position: relative;
          margin-right: 48px;
          color: #5f77a6;
          font-size: 16px;
          cursor: pointer;
          line-height: 24px;
          padding-bottom: 12px;
          sup {
            position: absolute;
            font-size: 12px;
            top: -5px;
          }
        }
        .tab.selected {
          color: #152844;
          font-weight: 600;
          .underline {
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 16px;
            height: 4px;
            background: #4684e2;
          }
        }
      }
      .book-intro {
        .title {
          font-weight: 600;
          font-size: 16px;
          line-height: 18px;
          color: #152844;
          height: 16px;
          border-left: 4px solid #4684e2;
          margin: 27px 0 11px;
          padding: 0 0 0 8px;
        }
        .text {
          color: #484848;
          font-size: 16px;
          line-height: 26px;
          padding-left: 12px;
          margin: 11px 0;
          white-space: pre-wrap;
          li.published-item {
            display: flex;
            margin-bottom: 8px;
            font-size: 14px;
            line-height: 22px;
            height: 22px;
            color: #484848;
            .published-label {
              -webkit-box-pack: justify;
              -ms-flex-pack: justify;
              justify-content: space-between;
              -webkit-box-flex: 0;
              -ms-flex: 0 0 56px;
              flex: 0 0 56px;
              margin-right: 24px;
              text-align: justify;
            }
            .published-value {
              flex: 1;
              -webkit-box-flex: 1;
            }
          }
        }
      }
    }
    .recommend {
      flex: 0 0 235px;
      margin-left: 20px;
      .title {
        font-weight: 600;
        font-size: 18px;
        line-height: 26px;
        color: #152844;
        margin-bottom: 12px;
      }
      .books {
        border-top: 1px solid #cedce4;
      }
    }
  }
}
</style>
